import React, {Component} from 'react'
import Link from 'next/link'
import {observable, computed} from 'mobx'
import {observer, Provider, inject} from 'mobx-react'
import tagStore from 'store/tag'
import navigationStore from 'store/navigation'

@observer
class App extends Component{
  
  render() {
    return (
      <div className={`header ${navigationStore.open?'':'navi-close'}`}> 
        <span
        className={`item anticon ${navigationStore.open ? 'anticon-menu-fold':'anticon-menu-unfold'}`} 
        onClick={()=>navigationStore.open = !navigationStore.open}>
        </span>
      <Link href="/">
        <a className="item">主页</a>  
      </Link>
      <Link href="/tag">
        <a className="item">分类</a>    
      </Link>
      <Link href="/tag">
        <a className="item">关于</a>
      </Link>
      <style jsx>{`
        .header{
          padding: 30px 50px;
          font-size: 16px;
          border-bottom: 1px solid #eee;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 100;
          background: #fff;
          font-family:'jphuaifangti107bdf76071c011';
          transition: all .3s;
        }
        .item{
          margin-right: 10px;
          cursor: pointer;
          &:hover{
            opacity: .5;
          }
        }
        @media(max-width: 700px) {
          .header{
            padding: 30px 20px;          
          }
        }
      `}</style>
    </div>
    )
  }
}

export default App